<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product.css">
    <script src="js/jquery-3.4.0.min.js"></script>
    <script src="js/rootfont.js"></script>
    <script src="js/product.js"></script>

</head>

<body>
    <div class="app">
        <div class="public-header">
            <div class="public-container clearfix">
                <div class="status">
                    <img src="images/status2.png">
                </div>
                <div class="person-top">
                    <a href="javascript:history.back();" class="fl"><img class="setting" src="images/product/icon_back.png"></a>
                    <span>商品详情</span>
                    <a ><img class="menu fr" src="images/product/icon_share.png"></a>
                </div>
            </div>
        </div>

        <!-- 轮播 -->
        <div class="banner">
            <div class="slide transition">
                <img class="slide_img" src="images/product/banner.png" />
                <img class="slide_img" src="images/index/icon_product.png" />
                <img class="slide_img" src="images/index/banner.png" />
            </div>
            <div class="slide-bt"></div>
        </div>

        <!-- 商品信息 -->
        <div class="price public-container clearfix">
            <div class="fl">
                <div class="current"><span class="unit">￥</span><span>2000-2500</span></div>
                <div class="original">原价¥7500</div>
            </div>
            <div class="sales fr">已售 <span>7623</span> </div>
        </div>
        <div class="info public-container clearfix">
            <div class="name">嘟瑞咪智能婴儿床</div>
            <div class="introduction">智能婴儿床采用最新的传导技术，可以同时监测宝宝的体温、尿湿和外界环境的细微变化，</div>
        </div>
        <div class="bg"></div>

        <!-- 商品详情 -->
        <div class="details">
            <div class="title public-container">详情介绍</div>
            <div class="content">
                <div class="">
                    <img src="images/product/details.png" alt="">
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="public-footer">
            <div class="list clearfix">
                <ul class="list_above">
                    <li class="item item1">
                        <a >
                            <div class="footer_icon">
                                <img src="images/product/icon_shop.png" alt="店铺" srcset="">
                            </div>
                            <p>店铺</p>
                        </a>
                    </li>
                    <li class="item item2">
                        <a >
                            <div class="footer_icon">
                                <img src="images/product/icon_wang.png" alt="客服" srcset="">
                            </div>
                            <p>客服</p>
                        </a>
                    </li>
                    <li class="item item3">
                        <a >
                            <div class="footer_icon">
                                <img src="images/product/icon_collection.png" alt="收藏" srcset="">
                            </div>
                            <p>收藏</p>
                        </a>
                    </li>
                    <li class="item item4">
                        <a class="left addcart" >
                            加入购物车
                        </a>
                        <a class="right buy" >
                            立即购买
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 弹出框 -->
    <div class="widgets-cover">
        <div class="cover-bg"></div>
        <div class="cover-content">
            <div class="sku-wrap">
                <div class="header">
                    <div class="img-wrap">
                        <img src="images/product/banner.png"></div>
                    <div class="main">
                        <div class="price-wrap"><span class="price"> ¥2000-2500 </span> <a  class="close fr">X</a> </div>
                        <div class="sku-info"> 已选: <span>规格分类</span> </div>
                    </div>
                </div>
                <div class="body">
                    <div class="body-item">
                        <h3 id="prop_title_0">规格分类:</h3>
                        <ul class="sku-list-wrap">
                            <li>
                                <a ><span class="item1">智能婴儿床系列1-暖红色</a></span>
                            </li>
                            <li>
                                <a ><span class="item2">智能婴儿床系列2-暖红色</a> </span>
                            </li>
                            <li>
                                <a ><span class="item3">智能婴儿床系列3-暖红色</a> </span>
                            </li>
                            <li>
                                <a ><span class="item4">智能婴儿床系列4-暖红色</a> </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="footer">
                    <a class="ok">
                        <p>确定购买</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>